<template>
  <div class="box">
      <div class="find">
        <div class="logo">
          <div class="logo-text">
            探索新生活
            <i class="el-icon-caret-right"></i>
          </div>
        </div>
      </div>
      <div class="nice-goods">
        <transition name="move">
          <ul id="goods" ref="m" @mouseenter="pause" @mouseleave="recover">
            <li>
              <div class="goods_name">安踏 水花三代 运动鞋</div>
                <div class="goods_img">
                  <img src="../common/img/nice-goods1.webp" alt="">
                </div>
            </li>
            <li>
              <div class="goods_img">
                <img src="../common/img/nice-goods2.webp" alt="">
              </div>
              <div class="goods_name">惠普 碳纤维 笔记本</div>
            </li>
            <li>
              <div class="goods_name">李宁 吸湿防滑 篮球</div>
                <div class="goods_img">
                  <img src="../common/img/nice-goods3.webp" alt="">
                </div>
            </li>
            <li>
              <div class="goods_img">
                <img src="../common/img/nice-goods4.webp" alt="">
              </div>
              <div class="goods_name">三星 1亿像素 5G手机</div>
            </li>
            <li>
              <div class="goods_name">Apple A12 平板电脑</div>
                <div class="goods_img">
                  <img src="../common/img/nice-goods5.webp" alt="">
                </div>
            </li>
            <li>
              <div class="goods_img">
                <img src="../common/img/nice-goods6.webp" alt="">
              </div>
              <div class="goods_name">索尼 主动降噪 蓝牙耳机</div>
            </li>
            <li>
              <div class="goods_name">乐高机械组货运飞机</div>
                <div class="goods_img">
                  <img src="../common/img/nice-goods7.webp" alt="">
                </div>
            </li>
            <li>
              <div class="goods_img">
                <img src="../common/img/nice-goods8.webp" alt="">
              </div>
              <div class="goods_name">罗技无线蓝牙键盘</div>
            </li>
            <li>
              <div class="goods_name">安踏 水花三代 运动鞋</div>
                <div class="goods_img">
                  <img src="../common/img/nice-goods1.webp" alt="">
                </div>
            </li>
            <li>
              <div class="goods_img">
                <img src="../common/img/nice-goods2.webp" alt="">
              </div>
              <div class="goods_name">惠普 碳纤维 笔记本</div>
            </li>
            <li>
              <div class="goods_name">李宁 吸湿防滑 篮球</div>
                <div class="goods_img">
                  <img src="../common/img/nice-goods3.webp" alt="">
                </div>
            </li>
            <li>
              <div class="goods_img">
                <img src="../common/img/nice-goods4.webp" alt="">
              </div>
              <div class="goods_name">三星 1亿像素 5G手机</div>
            </li>
            <li>
              <div class="goods_name">Apple A12 平板电脑</div>
                <div class="goods_img">
                  <img src="../common/img/nice-goods5.webp" alt="">
                </div>
            </li>
            <li>
              <div class="goods_img">
                <img src="../common/img/nice-goods6.webp" alt="">
              </div>
              <div class="goods_name">索尼 主动降噪 蓝牙耳机</div>
            </li>
            <li>
              <div class="goods_name">乐高机械组货运飞机</div>
                <div class="goods_img">
                  <img src="../common/img/nice-goods7.webp" alt="">
                </div>
            </li>
            <li>
              <div class="goods_img">
                <img src="../common/img/nice-goods8.webp" alt="">
              </div>
              <div class="goods_name">罗技无线蓝牙键盘</div>
            </li>
          </ul>
        </transition>
      </div>
  </div>
</template>

<script>
  export default {
      name:'Move',
      data() {
        return {
          timer:null,
          step:0,
        }
      },
      mounted() {
        this.move()
      },
      methods: {
        move() {
          var moveItem = document.getElementById('goods')
          var step = this.step
          this.timer = setInterval(()=>{
              moveItem.style.marginLeft = step +'px';
              step  = step-1;
          if (moveItem.style.marginLeft == -1520+'px') {
            moveItem.style.marginLeft = 0 +'px';
            step = 0;
          }
          } , 50);
        },
        pause(){
          clearInterval(this.timer)
        },
        recover(){
          //去掉marginLeft的单位px,否则step是NaN
          this.step = this.$refs.m.style.marginLeft.replace('px','');
          this.move()
        }
      },
  }
</script>

<style scoped>
  .box{
    width: 1190px;
    height: 260px;
    margin: 10px auto;
    overflow: hidden;
    background-color: #fff;
    position: relative;
  }
  .box div{
    float: left;
  }
  .find{
    width: 190px;
    height: 260px;
    margin-right: 10px;
    overflow: hidden;
    background-image: url("../common/img/find.png");
  }
  .logo{
    width: 160px;
    height: 90px;
    margin: 15px;
    z-index: 10;
    background-image: url("../common/img/find-logo.png");
  }
  .logo-text{
    color: rgba(255,255,255,0.8);
    font-size: 16px;
    padding: 55px 0 10px 20px;
    display: block;
  }
  .nice-goods{
    width: 990px;
    height: 260px;
    overflow: hidden;
  }
  #goods{
    width: 3040px;
    height: 260px;
    padding: 0;
    font-size: 14px;
    list-style: none;
  }
  #goods li{
    width: 150px;
    height: 260px;
    margin: 0 20px;
    float: left;
  }
  #goods div{
    float: left;
    margin: 20px 0;
  }
  #goods_name{
    width: 150px;
    text-align: center;
  }
</style>